<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { detailApi, createApi, editApi, platformApi } from '#/api/user/user';

const formData = ref();

const [Form, formApi] = useVbenForm({
  schema: [
    {
      fieldName: 'user_id',
      label: 'ID',
      defaultValue: 0,
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: [''],
      },
    },
    {
        fieldName: 'avatar',
        component: 'ImageUpload',
        label: '头像',
        componentProps: {
          maxCount: 1,
        },
    },
    {
        fieldName: 'password',
        label: '密码',
        component: 'InputPassword',
        componentProps: {
            placeholder: '请输入密码',
        },
        dependencies: {
          if(values) {
            return values.user_id?false:true;
          },
          // 随意一个字段改变时，都会触发
          triggerFields: ['user_id'],
        },
        rules: 'required',
    },
    {
        fieldName: 'password',
        label: '新密码',
        component: 'InputPassword',
        componentProps: {
            placeholder: '请输入密码',
        },
        description: '不填写则不修改',
        controlClass: 'grow',
        wrapperClass: 'flex-wrap',
        formItemClass: 'items-start',
        labelClass: 'pt-[5px]',
        dependencies: {
          if(values) {
            return values.user_id?true:false;
          },
          // 随意一个字段改变时，都会触发
          triggerFields: ['user_id'],
        },
    },
    {
        fieldName: 'mobile',
        label: '手机号',
        component: 'Input',
        componentProps: {
            placeholder: '请输入手机号',
        },
        rules: 'required',
    },
    {
        fieldName: 'nick_name',
        label: '昵称',
        component: 'Input',
        componentProps: {
            placeholder: '请输入昵称',
        },
        rules: 'required',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        api: platformApi,
        afterFetch: (data: { name: string; value: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.value,
          }));
        },
        placeholder: '请选择注册来源',
        class: 'w-[100%]',
      },
      defaultValue: 'H5',
      fieldName: 'platform',
      label: '注册来源',
      rules: 'required',
    },
    {
        fieldName: 'email',
        label: '邮箱',
        component: 'Input',
        componentProps: {
            placeholder: '请输入邮箱',
        },
    },
    {
        fieldName: 'gender',
        label: '性别',
        component: 'RadioGroup',
        defaultValue: 1,
        componentProps: {
          buttonStyle: 'solid',
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 2 },
            { label: '未知', value: 0 },
          ],
          optionType: 'button',
        },
    },
    {
        fieldName: 'status',
        label: '状态',
        defaultValue: 1,
        component: 'Switch',
        componentProps: {
            class: 'w-auto',
            checkedChildren: '正常',
            checkedValue: 1,
            unCheckedChildren: '禁用',
            unCheckedValue: 0,
        },
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    (values.user_id ? editApi(values) : createApi(values))
      .then((res) => {
        message.success({
          content: res.message,
        });
        drawerApi.close();
      })
      .catch(() => {
        drawerApi.unlock();
      });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      formData.value = data;
      if (data.user_id) {
        detailApi(data.user_id).then((res) => {
          formApi.setValues(res);
        })
      }
    }
  },
  overlayBlur: 1,
});

const getDrawerTitle = computed(() => {
  return formData.value?.user_id
    ? '编辑用户'
    : '新增用户';
});


</script>
<template>
  <Drawer :title="getDrawerTitle">
    <Form />
  </Drawer>
</template>
